import styles from './index.less';
import { Pagination } from 'antd';
import { IGetInitialProps, Link, isBrowser } from 'umi';
import { useEffect, useRef, useState } from 'react';

import { AliyunVideoUpload, PlvVideoListModalUpload } from '../pc/components/Upload';
import PlvVideoUpload from '@/pages/pc/components/Upload/PlvVideoUpload';
import { allGet } from '@/services/pc';

const mockFetch = async (page) => {
  return page;
};

type Props = {
  currentPage: number;
  path: string;
  preFetchData: any;
};
const Index: React.FC<Props> & { getInitialProps: IGetInitialProps<Props, { page: any }> } = (
  props,
) => {
  // 服务端预请求数据接管到state
  const [data, setData] = useState(props.preFetchData);

  const { path } = props;
  const currentPath = path.split(':')[0];

  // 分页起修改
  const handlePageChange = (page) => {
    setData(page);
  };

  // 修改为Link标签 做seo优化
  const itemRender = (page, type) => {
    const prev = page <= 1 ? 1 : page - 1;
    const next = page + 1;
    if (type === 'prev') {
      return <Link to={`${currentPath}${prev}`}>上一页</Link>;
    }
    if (type === 'next') {
      return <Link to={`${currentPath}${prev}`}>上一页</Link>;
    }
    return <Link to={`${currentPath}${page}`}>{page}</Link>;
  };

  return (
    <div className={styles.a}>
      <div>当前页面：{props.currentPage}</div>
      {`分页请求了：第${data}页`}
      <Pagination
        defaultCurrent={props.currentPage}
        total={50}
        itemRender={itemRender}
        onChange={handlePageChange}
      />
    </div>
  );
};

// 服务端预渲染
Index.getInitialProps = async ({ match }) => {
  const { path, params } = match;
  const { page } = params;
  console.log(match);
  const response = await mockFetch(page);
  return {
    path,
    currentPage: page,
    preFetchData: response,
  };
};

const Blw = () => {
  const auth = async () => {
    const response = await allGet({ params: { mod: 'polyv', do: 'uploadAuth', version: 'pc1.0' } });
    return { ...(response?.data || {}), ptime: response?.data?.ts };
  };
  //return <PlvVideoUpload />
  return <PlvVideoListModalUpload action="" getPlvAuth={auth} refreshPlvAuth={auth} />;
};

export default Blw;
